<!--
 * @Description:: 育小帮科技有限公司
 * @Version: 1.0
 * @Author: smallWhite
 * @Date: 2023-02-14 10:32:02
 * @LastEditors: smallWhite
 * @LastEditTime: 2023-05-31 09:25:30
 * @FilePath: /siana_admin/src/views/gpt_key/components/modal.vue
-->
<template>
  <!--弹窗-->
  <el-dialog :title="title"
    :visible.sync="dialogVisible"
    width="500px"
    :fullscreen="phone"
    :close-on-click-modal="false"
    :before-close="handleClose"
    class="upload_box">
    <!--form-->
    <el-form ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      :label-position="position"
      label-width="100px">
      <el-form-item
        label="服务器ID"
        prop="guildId">
        <!--下拉列表-->
        <el-input
          v-model="ruleForm.guildId"
          placeholder="请输入" />
      </el-form-item>
      <el-form-item
        label="频道ID"
        prop="channelId">
        <!--下拉列表-->
        <el-input
          v-model="ruleForm.channelId"
          placeholder="请输入" />
      </el-form-item>
      <el-form-item
        label="用户Token"
        prop="userToken">
        <!--下拉列表-->
        <el-input
          v-model="ruleForm.userToken"
          placeholder="请输入" />
      </el-form-item>
      <el-form-item
        label="并发数"
        prop="coreSize">
        <!--下拉列表-->
        <el-input
          v-model="ruleForm.coreSize"
          placeholder="请输入" />
      </el-form-item>
      <el-form-item
        label="等待队列长度"
        prop="queueSize">
        <!--下拉列表-->
        <el-input
          v-model="ruleForm.queueSize"
          placeholder="请输入" />
      </el-form-item>
      <el-form-item
        label="任务超时时间(分钟)"
        prop="timeoutMinutes">
        <!--下拉列表-->
        <el-input
          v-model="ruleForm.timeoutMinutes"
          placeholder="请输入" />
      </el-form-item>
      <el-form-item label="备注"
        prop="remark">
        <!--下拉列表-->
        <el-input
          v-model="ruleForm.remark"
          placeholder="请输入" />
      </el-form-item>
      <el-form-item
        label="是否启用"
        prop="state">
        <!--下拉列表-->
        <el-select
          v-model="ruleForm.state"
          style="width:100%"
          placeholder="请选择">
          <el-option
            label="启用"
            :value="1" />
          <el-option
            label="停用"
            :value="0" />
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 表单结束 -->
    <!--操作按钮-->
    <span slot="footer"
      class="dialog-footer">
      <el-button
        @click="handleClose">取
        消</el-button>
      <!--确定-->
      <el-button
        type="primary"
        :disabled="loading"
        @click="handleSubmit"><i
          v-if="loading"
          class="el-icon-loading"></i>确
        定</el-button>
    </span>
  </el-dialog>
  <!--弹窗 end-->
</template>

<script>
// 引入组件及方法
export default {
  name: 'Yxb3NewModal',

  data() {
    return {
      phone: false,
      type: 'state',
      // checked: false, //是否覆盖数据
      loading: false, // loading状态
      dialogVisible: false, // 弹窗显隐状态
      // 标题
      position: 'right',
      title: '', // 弹窗标题
      // 表单
      ruleForm: {
        guildId: '',
        channelId: '',
        state: 1,
        userToken: '',
        coreSize: 3,
        queueSize: 10,
        timeoutMinutes: 5,
        remark: ''
      },
      // 校验规则
      rules: {
        guildId: [{ required: true, message: '请输入', trigger: 'change' }],
        channelId: [{ required: true, message: '请输入', trigger: 'change' }],
        userToken: [{ required: true, message: '请输入', trigger: 'change' }]
      }
    }
  },

  //  初始化
  mounted() {
    this.phone = JSON.parse(window.localStorage.getItem('phone'))
    this.position = this.phone == true ? 'top' : 'right'
  },

  methods: {
    // 弹窗信息设置
    open(page, data) {
      this.phone = JSON.parse(window.localStorage.getItem('phone'))
      this.dialogVisible = true
      if (page == 'add') {
        this.title = '添加'
      } else {
        this.title = '编辑'
        this.ruleForm = data
      }
    },
    getApi(api) {
      this.$https(api, this.ruleForm).then(res => {
        this.$message.success(this.title + '成功')
        this.handleClose()
        this.$emit('ok')
      })
    },
    handleClose() {
      this.ruleForm = {
        guildId: '',
        channelId: '',
        state: 1,
        userToken: '',
        coreSize: 3,
        queueSize: 10,
        timeoutMinutes: 5,
        remark: ''
      }
      this.dialogVisible = false
    },
    // 提交
    handleSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.title == '添加') {
            this.getApi('MJDJOURNEYADD')
          } else {
            this.getApi('MJDJOURNEYUPDATE')
          }
        }
      })
    }
  }
}
</script>
<style lang="scss">
.upload_box {
  .el-upload-dragger {
    width: 460px !important;
  }
}
</style>
